<template>
  <el-dialog v-model="dictDialogModel.dialogVisible" :title="dictDialogModel.title" :width="1000">
    <div class="search">
      <el-form :inline="true">
        <el-form-item label="关键字" prop="name">
          <el-input v-model="dictInput.keyWord" placeholder="字典类型名称/编码" clearable />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click.stop="searchDict">搜索</el-button>
          <el-button>重置</el-button>
        </el-form-item>
      </el-form>

      <el-card shadow="never">
        <template #header>
          <el-button type="success" @click.stop="add">新增</el-button>
          <el-button type="danger" v-show="false">删除</el-button>
        </template>

        <div class="box-list">
          <el-table border style="width: 100%" :data="dictOutput.list">
            <el-table-column type="index" width="60" label="序号" />
            <el-table-column prop="name" label="字典名称" width="120" />
            <el-table-column prop="typeCode" label="字典编码" width="120" />
            <el-table-column prop="value" label="字典值" width="80" />
            <el-table-column prop="remark" label="备注" width="auto" align="center" />
            <el-table-column prop="address" label="操作" width="180" align="center">
              <template #default="scope">
                <el-button text type="primary" size="small" @click.stop="edit(scope.row)">编辑</el-button>
                <el-button text type="warning" size="small" @click.stop="deleteItem(scope.row.id)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>

          <el-pagination class="page" v-model:current-page="dictInput.pageNo" v-model:page-size="dictInput.pageSize"
            @update:page-size="searchDict" @update:current-page="searchDict" :background="true"
            layout="sizes, prev, pager, next" :page-sizes="[5, 10, 20]" :total="dictOutput.count" />
        </div>
      </el-card>
    </div>

    <template #footer>
      <div class="dialog-footer">
        <!-- <el-button type="primary" @click.stop="commit">确 定</el-button> -->
        <el-button @click.stop="closeDialog">取 消</el-button>
      </div>
    </template>
  </el-dialog>

  <el-dialog v-model="dictEditDialogModel.dialogVisible" :title="dictEditDialogModel.title" :width="500">
    <el-form :model="dict" :rules="rules" ref="ruleFormRef">
      <el-form-item label="字典名称:" prop="name">
        <el-input v-model="dict.name" placeholder="字典名称" clearable />
      </el-form-item>
      <el-form-item label="字典编码:" prop="typeCode">
        <el-input v-model="dict.typeCode" placeholder="字典编码" clearable />
      </el-form-item>
      <el-form-item label="字典值:" prop="value">
        <el-input v-model="dict.value" placeholder="字典值" clearable />
      </el-form-item>
      <el-form-item label="状态:" prop="status">
        <el-radio-group v-model="dict.status">
          <el-radio :label="0">正常</el-radio>
          <el-radio :label="1">禁用</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="是否默认:" prop="isDefault">
        <el-switch v-model="dict.isDefault" />
      </el-form-item>
      <el-form-item label="排序:" prop="sort">
        <el-input-number style="width: 100px" controls-position="right" :min="0" v-model="dict.sort" />
      </el-form-item>
      <el-form-item label="备注:" prop="remark">
        <el-input v-model="dict.remark" :rows="2" type="textarea" placeholder="备注" clearable />
      </el-form-item>
    </el-form>

    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click.stop="commit">确 定</el-button>
        <el-button @click.stop="closeDictItemDialog">取 消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { IPageOutput, ConfirmDialog, formatDate, validateForm } from "@/utils/common";
import { IDictType, IDictInput, IDict, getDictRules } from '@/api/dict/type'
import { getDictPage, addDict, updateDict, deleteDict } from "@/api/dict/index";
import { Dialog } from '@/utils/dialog';
import { toValue } from 'vue';
import { ElMessage } from "element-plus";
import type { FormInstance } from 'element-plus'


// 数据字典弹窗viewMode
const dictDialogModel = reactive(new Dialog());
// 数据字典项编辑弹窗viewMode
const dictEditDialogModel = reactive(new Dialog());
// 验证规则
const rules = getDictRules();
// 字典列表查询参数
const dictInput = reactive<IDictInput>({
  pageNo: 1,
  pageSize: 5,
});
// 字典列表返回值
const dictOutput = ref<IPageOutput<IDict>>({
  count: 0,
  list: [],
});
// 字典项数据
const dict = ref<IDict>({
  sort: 0,
  status: 0,
});
// 表单实例
const ruleFormRef = ref<FormInstance | null>(null)

// 搜索
const searchDict = async () => {
  var dict = await getDictPage(dictInput);
  dictOutput.value = dict.data;
}

// 提交
const commit = () => {
  validateForm(ruleFormRef).then(async () => {
    if (dictEditDialogModel.title == "字典新增") {
      await addDict(toValue(dict));
      closeDictItemDialog();
      await searchDict();
    }
    else if (dictEditDialogModel.title == "字典编辑") {
      await updateDict(toValue(dict));
      closeDictItemDialog();
      await searchDict();
    }
  })
}
const closeDialog = () => {
  dictDialogModel.close();
}
/**
 * 显示弹窗
 */
const showDialog = (dictType: IDictType) => {
  dictDialogModel.show(`【${dictType.name}】数据字典`);

  dictInput.sysDictTypeId = dictType.id;
  searchDict();
}

const edit = (dictInput: IDict) => {
  dictEditDialogModel.show("字典编辑");

  dict.value = dictInput;
  dict.value.updateTime = formatDate(new Date(), "yyyy-MM-dd HH:mm:ss");
}
const add = () => {
  dictEditDialogModel.show("字典新增");

  dict.value.id = undefined;
  dict.value.name = "";
  dict.value.value = "";
  dict.value.remark = "";
  dict.value.typeCode = "";
  dict.value.sort = 0;
  dict.value.status = 0;
  dict.value.isDefault = false;
  dict.value.sysDictTypeId = dictInput.sysDictTypeId;
  dict.value.createTime = formatDate(new Date(), "yyyy-MM-dd HH:mm:ss");
  dict.value.userId = "testId";
}
const deleteItem = async (id: number) => {
  ConfirmDialog("确认删除?",
    async () => {
      await deleteDict([id]);
      await searchDict();
      ElMessage({
        type: 'success',
        message: '删除成功',
      });
    },
    () => {
      ElMessage({
        type: 'info',
        message: '删除取消',
      });
    });
}

const closeDictItemDialog = () => {
  dictEditDialogModel.close();
}

// 方法公开
defineExpose({
  showDialog
})
</script>

<style scoped>
.page {
  margin-top: 10px;
  display: flex;
  justify-content: flex-end;
}

.dialog {
  padding: 0 20px;
}
</style>